<script>
import { getTableList } from '@/api/form'
import ImportTable from '@/views/generator/code-generator/import-table/index.vue'
import GeneratorConfig from '@/views/generator/code-generator/generato-config/index.vue'
import { useTableSyncApi } from '@/api/table'
import Generator from "@/views/generator/code-generator/generator/index.vue";
import {useDownloadApi} from "@/api/generator";

export default {
  name: 'CodeGenerator',
  components: {Generator, GeneratorConfig, ImportTable },
  data() {
    return {
      state: {
        queryForm: {
          tableName: null,
          limit: 10,
          page: 1
        },
        dataListLoading: false,
        dataList: [],
        dataListSelections: [],
        total: 0,
        primaryKey: 'id'
      }
    }
  },
  created() {
    this.getDataList()
  },
  methods: {
    getDataList() {
      getTableList(this.state.queryForm).then(res => {
        const { data } = res
        this.state.dataList = data.list
        this.state.total = data.total
      })
    },
    importHandle() {
      this.$refs.Itb.open()
    },
    downloadBatchHandle() {
      const tableIds = this.state.dataListSelections || []

      if (tableIds.length === 0) {
        this.$message.warning('请选择生成代码的表')
        return
      }

      useDownloadApi(tableIds)
    },
    deleteBatchHandle() {

    },
    editHandle(tableId) {
      this.$refs.GC.initial(tableId)
    },
    generatorHandle(tableId) {
      this.$refs.Generator.init(tableId)
    },
    syncHandle(row) {
      this.$msgbox.confirm(`确定同步数据表${row.tableName}吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          useTableSyncApi(row.id).then(() => {
            this.$message.success('同步成功')
          })
        })
        .catch(() => {})
    },
    sizeChangeHandle(size) {
      this.state.queryForm.limit = size
      this.getDataList()
    },
    currentChangeHandle(page) {
      this.state.queryForm.page = page
      this.getDataList()
    },
    selectionChangeHandle(selection) {
      this.state.dataListSelections = selection.map((item) =>
        this.state.primaryKey && item[this.state.primaryKey])
    }
  }
}
</script>

<template>
  <el-card>
    <el-form :inline="true" :model="state.queryForm" size="small" @keyup.enter="getDataList()">
      <el-form-item>
        <el-input v-model="state.queryForm.tableName" placeholder="表名" />
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="importHandle()">导入</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="downloadBatchHandle()">生成代码</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="deleteBatchHandle()">删除</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="state.dataListLoading" :data="state.dataList" border style="width: 100%" @selection-change="selectionChangeHandle">
      <el-table-column type="selection" header-align="center" align="center" width="50" />
      <el-table-column prop="tableName" label="表名" header-align="center" align="center" />
      <el-table-column prop="tableComment" label="表说明" header-align="center" align="center" />
      <el-table-column prop="className" label="类名" header-align="center" align="center" />
      <el-table-column label="操作" fixed="right" header-align="center" align="center" width="250">
        <template #default="scope">
          <el-button size="small" type="text" link @click="editHandle(scope.row.id)">编辑</el-button>
          <el-button size="small" type="text" link @click="generatorHandle(scope.row.id)">生成代码</el-button>
          <el-button size="small" type="text" link @click="deleteBatchHandle(scope.row.id)">删除</el-button>
          <el-button size="small" type="text" link @click="syncHandle(scope.row)">同步</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex;justify-content: flex-end">
      <el-pagination
        style="margin-top: 10px"
        :current-page="state.page"
        :page-size="state.limit"
        :total="state.total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
      />
    </div>
    <generator ref="Generator"/>
    <import-table ref="Itb" />
    <generator-config ref="GC" />
  </el-card>
</template>

<style scoped lang="scss">

</style>
